
const path = require("path");
const webpack = require("webpack");
const merge = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

const base = require('./webpack.config.base');

module.exports = merge(base,{
    mode:'production',
    entry: {
        vendor: [
            "react",
            "react-dom",
            "react-router",
        ],
        index: path.resolve(__dirname,'./src/index.js'),
    },
    output: {
        path: path.join(__dirname, "dist"),
        publicPath: "./",
        filename: "assets/[name].[hash].js",
        chunkFilename: "assets/[name].chunk.[hash].js"
    },
    module: {
        rules: [

            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "style-loader",
                    "css-loader",
                    "postcss-loader?sourceMap",
                    "resolve-url-loader",
                ]
            },
        ]
    },
    optimization: {
        runtimeChunk: {
            name: 'manifest'
        },
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true, // set to true if you want JS source maps,
                uglifyOptions: {
                    warnings: false
                }
            }),
            new OptimizeCSSAssetsPlugin({})
        ],
        splitChunks:{
            //会继承和覆盖splitChunks的配置项
            chunks: 'initial',
            minSize: 30000,
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            cacheGroups: {
                vendor: {
                    test: /node_modules\/(.*)\.js/,
                    name: 'vendor',
                    chunks: 'initial',
                    priority:10,
                    reuseExistingChunk: false //可设置是否重用该chunk（查看源码没有发现默认值）
                },
                styles: {
                    name: 'styles',
                    test: /\.(less|scss|css)$/,
                    chunks: 'initial',
                    minChunks: 1,
                    reuseExistingChunk: true,
                    enforce: true
                }
            }
        }
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/app.[name].css',
            chunkFilename: 'css/app.[contenthash:12].css'
        }),
    ]
});